<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/01.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 1870 60 -->
    <div class="box">
        <nav class="nav">
            <ul>
                <li>小米商城</li>
                <li>MIUI</li>
                <li>loT</li>
                <li>云服务</li>
                <li>天星数科</li>
                <li>有品</li>
                <li>小爱开放平台</li>
                <li>企业团购</li>
                <li>资质证照</li>
                <li>协议规则</li>
                <li>下载app</li>
                <li>Select location</li>
            </ul>
            <ul class="second">
                <li>登录</li>
                <li>注册</li>
                <li>消息通知</li>
                <li>购物车</li>
            </ul>
        </nav>
    </div>
    <script>
        let div = $("<div class='box2'>购物车</div>");
        $('.nav .second').append(div);
        div.css({
            width:'120px',
            height:'100px',
            position:'absolute',
            backgroundColor:'#ccc',
            left:'95px',
            top:'60px',
            display:'none',
        });
        let Li = $('.nav .second li');
        Li[3].onmouseenter = ()=>{
            div.stop(true);
            div.slideDown(500);
        }
        Li[3].onmouseleave = ()=>{
            div.stop(true);

            div.slideUp(500);

        }
    </script>
</body>
</html>